<template>
  <div class="state-chart-div"
       ref="overdueChartDiv"
       id="overdueChartDiv"></div>
</template>

<script>
  // 引入基本模板
  // 引入环形图图组件
  import 'echarts/lib/chart/pie'
  import 'echarts/lib/chart/bar'
  import 'echarts/lib/chart/line'
  // 引入提示框和title组件
  import 'echarts/lib/component/tooltip'
  import 'echarts/lib/component/title'
  import pieEchartsOption from '@/utils/echarts/pie.js' // 引用统计图样式
  let echarts = require('echarts/lib/echarts')
  export default {
    data () {
      return {

      }
    },
    created () {
      this.getDeptOverdueCharts()
    },
    methods: {
      // 处室超期件统计
      getDeptOverdueCharts () {
        this.overdueDivLoading = true
        this.$axios.post(this.$api.homeCharts.deptOverdueCharts).then(rs => {
          if (rs) {
            this.deptOverdueListData = rs
            let dueLegendData = this.deptOverdueListData.map(item => ({
              name: `${item.name}`,
              value: item.value
            }))
            this.overdueDivLoading = false
            let myChart = echarts.init(this.$refs.overdueChartDiv)
            if (!myChart) return
            // 绘制图表
            let colorsList = [
              '#D87A80',
              '#FFB980',
              '#E5CF0D',
              '#97B552',
              '#2EC7C9',
              '#5AB1EF',
              '#B6A2DE',
              '#AA8C8A',
              '#909399',
              '#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc'
            ]
            let myechartsOyt = {
              title: {
                text: this.$moment().format('YYYY') + '年各处室超期件统计',
                x: 'left',
                left: '18%'
              },
              color: colorsList,
              tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} ({d}%)'
              },
              series: [
                {
                  name: '超期件',
                  type: 'pie',
                  radius: ['30%', '60%'],
                  center: ['30%', '56%'],
                  roseType: 'radius',
                  data: dueLegendData,
                  itemStyle: {
                    normal: {
                      label: {
                        show: false,
                        textStyle: {
                          fontSize: 16,
                          fontWeight: 'bolder',
                          fontFamily: 'Microsoft YaHei,微软雅黑'
                        }
                      },
                      labelLine: {
                        show: true
                      }
                    },
                    emphasis: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            }
            myechartsOyt = pieEchartsOption(myechartsOyt)
            myChart.setOption(myechartsOyt)
          }
        })
      }

    }
  }
</script>

<style lang='scss' scoped>
  .state-chart-div {
    width: 100%;
    height: 360px;
    padding-top: 20px;
  }
</style>
